<template>
  <section class="knife-content">
    <my-header></my-header>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(img, imgIdx) in bannerImgList" :key="imgIdx">
        <img v-lazy="img" class="banner-img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 快捷导航 -->
    <nav class="quick-enter-box">
      <router-link :to="{name: 'Home'}" class="quick-enter-item">
        <img src="../../common/image/nav1.png"  width="40" height="40"/>
        <span class="quick-enter-text">优惠活动</span>
      </router-link>
      <router-link :to="{name: 'Home'}" class="quick-enter-item">
        <img src="../../common/image/nav1.png"  width="40" height="40"/>
        <span class="quick-enter-text">优惠活动</span>
      </router-link>
      <router-link :to="{name: 'Home'}" class="quick-enter-item">
        <img src="../../common/image/nav1.png"  width="40" height="40"/>
        <span class="quick-enter-text">优惠活动</span>
      </router-link>
      <router-link :to="{name: 'Home'}" class="quick-enter-item">
        <img src="../../common/image/nav1.png"  width="40" height="40"/>
        <span class="quick-enter-text">优惠活动</span>
      </router-link>
    </nav>
    <!-- 广告位 -->
    <div class="guanggao-box">
      <img src="../../common/image/banner1.jpg" height="100px" />
    </div>
    <!-- 产品列表 -->
    <div class="content-wid">
      hahahhaha
    </div>
    <my-footer></my-footer>
  </section>
</template>

<script>
import { Lazyload, Swipe, SwipeItem } from 'vant'
import { getIndexMenulist } from '@/service/get-data'
import { myFooter, myHeader } from '@/components/index'
export default {
  components: {
    myFooter,
    myHeader,
    [Lazyload.name]: Lazyload,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data () {
    return {
      bannerImgList: [
        require('../../common/image/banner1.jpg'),
        require('../../common/image/banner2.jpg')
      ],
      mes: '信息值',
      menuList: []
    }
  },
  methods: {
    async fetchMenuList () {
      console.log('index')
      const res = await getIndexMenulist()
      console.log(res)
      if (res.resultCode && res.resultCode === 2000) {
        this.menuList = res.data
      }
    }
  },
  created () {
    // this.fetchMenuList()
  },
  activated () {
    console.log('activated')
  }
}
</script>

<style lang="stylus" scoped>
  .mainHeader
    font-size 16px
    color #000
    text-align center
  .content
    font-size 10px
    display flex
    justify-content center
  .content-wid
    display inline-block

  .banner-img
    width 100%
    height 200px

  .quick-enter-box
    position relative
    padding: 8px 0 36px
    display flex
    justify-content center
    text-align center
    font-size 24px
    color: #686868;

  .quick-enter-item
    flex 1
    img
      margin-bottom 3.5px

  .quick-enter-text
    overflow hidden
    display -webkit-box
    -webkit-line-clamp 1
    -webkit-box-orient vertical
    display box
    line-clamp 1
    box-orient vertical
    height .875rem
    line-height .875rem

  .guanggao-box
    height 200px
    width 100%
    img
      width 100%
      height 100%
</style>
